<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>个人资料</title>
		
		<style>
		/*最外框*/
			.contain {
				width: 250px;
				height: 400px;
				border: 1px solid gainsboro;
				margin: auto;
			}
			/*标题框*/
			.titleContain {
				width: 250px;
				height: 25px;
				background-color: gainsboro;
			}
			/*中间框*/
			.centerContain {
				width: 250px;
				height: 250px;
			}
			/*头像框*/
			.imgContain {
				width: 200px;
				height: 125px;
				border: 1px solid gainsboro;
				margin: 10px auto 115px;
			}
			/*底框*/
			.bottomContain {
				width: 250px;
				height: 90px;
				border-top: 1px solid gainsboro; 
				
			}
			.size {
				width: 200px;
				height: 150px;
			}
			.pst {
				background-color: white;
				margin-left: 65px;
				width: 80px;
				height: 40px;
				text-align: center;
			}
			.size1 {
				width: 50px;
				height: 40px;
				background-position-x: 100px;
				text-align: center;
			}
			.position {
				text-align: center;
			}
			.position1 {
				width: 150px;
				height: 800px;
				text-align: center;
				margin: 20px auto 5px;
			}
			.size2 {
				width: 50px;
				height: 40px;
			}
		</style>
	</head>
	<body>
		<div class="contain">
			<div class="titleContain">个人资料</div>
			<div class="centerContain">
				<div class="imgContain">
					<img src="img/猫咪.jpg" class="size" />
					<p class="position">V猫咪</p>
					<p class="pst"><img src="img/微博.jpg" class="size1"/></p>
				</div>
			</div>
			<div class="bottomContain">
				<div class="position1">
					<input type="button" value="加好友" class="size2"/>
					<input type="button" value="发纸条" class="size2"/>
					<br />
					<br />
					<input type="button" value="写留言" class="size2"/>
					<input type="button" value="加关注" class="size2"/>
				</div>	
			</div>
		</div>
	</body>
</html>
